<template>
    <view class="bodys">
        <view class="banner">
            <view class="bannerMsg">
                <p>用户编号： {{dataFile.merchantNo}}</p>
                <p>卡&nbsp;编&nbsp; 号：{{dataFile.snCode}}</p>
                <p>套&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;餐：{{dataFile.comboName}}</p>
                <p>有&nbsp;效&nbsp; 期：{{dataFile.time}}</p>
            </view>
            <view class="line-gradient">
                <view class="line-left"></view>
                <view class="line-right"></view>
            </view>
            <view class="bannerMsg">
                <p>当前套餐剩余流量：{{dataFile.surplusFlow}}{{dataFile.unit}}</p>
            </view>
            <view class="progress">
                <view class="bar" :style="{'width': `${widths}%`}"></view>

            </view>
        </view>
        <view class="relaNameTip">
            实名状态<span>(未实名的卡不能接入网络，请尽快实名)</span>
        </view>
        <view class="types">
            <view class="con">
                <view class="flexs" v-for="(item,index) in networkList" :key="index">
                    <p style="width: 100rpx;">
                        <image src="@/static/icon/p_012.png" mode=" heightFix" style="width: 60rpx;height:60rpx"
                            v-if="item.name=='中国移动'" />
                        <image src="@/static/icon/p_032.png" mode=" heightFix" style="width: 60rpx;height:60rpx"
                            v-else-if="item.name=='中国联通'" />
                        <image src="@/static/icon/p_031.png" mode=" heightFix" style="width: 60rpx;height:60rpx"
                            v-else />

                    <p>{{item.name}}</p>
                    </p>

                    <p style="width: 130rpx;">
                        <u-button shape="circle" size="small" v-if="item.status==1">
                            已实名
                        </u-button>
                        <u-button shape="circle" size="small" color="linear-gradient(to right, #5079ed, #5079ed)"
                            v-else-if="item.status==2" @click="goTip(item)">
                            去实名
                        </u-button>
                        <u-button shape="circle" size="small" color="linear-gradient(to right, #5079ed, #5079ed)"
                            v-else-if="item.status==3">
                            审核中
                        </u-button>
                    </p>
                </view>
            </view>
        </view>
        <view class="relaNameTip">
            其他功能
        </view>
        <view class="others flex-center-between">
            <view class="otherCon flex-center-center" v-for="(item,index) in otherList" :key="index"
                @click="goPage(item, index)">
                <view class="">
                    <p>{{item.state}}</p>
                    <p>
                        <image :src="item.icon" mode="heightFix" class="img"></image>
                    </p>
                    <p>
                        {{item.name}}
                    </p>
                </view>
            </view>
        </view>

        <u-modal :show="show" showCancelButton="true" @confirm="goRealname()" @cancel="show=false" confirmText="立即实名"
            title="温馨提示" :content='content'></u-modal>

    </view>
</template>

<script>
    import {
        bindInfo,
        getUrl
    } from '@/common/api.js'
    export default {
        data() {
            return {
                dataFile: {},
                widths: '',
                networkList: [{
                        state: '在用',
                        icon: require('@/static/icon/p_012.png'),
                        name: '中国移动',
                    },
                    {
                        state: '去实名',
                        icon: require('@/static/icon/p_032.png'),
                        name: '中国联通',
                    }, {
                        state: '审核中',
                        icon: require('@/static/icon/p_031.png'),
                        name: '中国电信',
                    },
                ],
                otherList: [{
                        icon: require('@/static/icon/p_004.png'),
                        name: '充值续费',
                        path: '/pages/combo/combo'
                    },
                    {

                        icon: require('@/static/icon/p_010.png'),
                        name: '充值记录',
                        path: '/pages/user/rechargeRecord'
                    }, {

                        icon: require('@/static/icon/p_003.png'),
                        name: '套餐查询',
                        path: '/pages/combo/comboQuery'
                    },

                ],
                merchantId: '',
                show: false,
                realVal: '',
                content: '尊敬的用户：如您已提交实名认证，运营商系统审核中，通常需要15分钟左右能出结果，请勿重复提交并耐心等待。'
            }
        },

        onLoad(options) {
            this.intoData(options)
        },
        methods: {
            intoData(options) {
                let merchantId = options.merchantId
                this.merchantId = merchantId
                bindInfo(merchantId).then((res) => {
                    this.dataFile = res.data
                    this.dataFile.comboList = res.data.list[0]
                    this.widths = Number(res.data.totalFlow) === 0 ? 0 : (Number(res.data.surplusFlow) /
                        Number(
                            res.data.totalFlow)) * 100

                    this.networkList = res.data.list
                })
            },
            goPage(item, index) {
                uni.navigateTo({
                    url: `${item.path}?merchantId=${this.merchantId}`
                })

            },
            goTip(item) {
                this.show = true;
                this.realVal = item.iccId
            },
            goRealname() {
                getUrl(this.realVal).then(res => {
                    console.log("res:" + res)
                    // wx.navigateToMiniProgram({
                    //     shortLink: '#小程序://中移在线小助手/5BaVUA0IGbVLOgq',
                    //     //develop开发版；trial体验版；release正式版
                    //     envVersion: 'release',
                    //     success(res) {
                    //         // 打开成功
                    //         console.log("跳转小程序成功！", res);
                    //     }
                    // })

                    let urlData = res.data
                    if (res.data) {
                        uni.navigateTo({
                            url: '/pages/webview/webview?src=' + encodeURIComponent(urlData)
                        })
                    } else {
                        this.$u.toast('请间隔三分钟后在从试')
                    }
                })
                console.log(item.iccId);
            }
        }
    }
</script>

<style lang="scss" scoped>
    .bodys {
        width: 95%;
        margin-left: 2.6%;
        font-size: 28rpx;

        .banner {
            width: 100%;
            height: 455rpx;
            border-radius: 20rpx;
            color: #fff;
            background-color: #5079ed;

            .bannerMsg {
                width: 95%;
                margin-left: 5%;
                padding-top: 30rpx;

                p {
                    padding-top: 6rpx;
                }
            }

            .line-gradient {
                width: 80%;
                height: 40rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                margin: 30rpx 10% 5rpx 10%;

                .line-left {
                    width: 50%;
                    height: 2rpx;
                    background: linear-gradient(to right, #5079ed, #fff);
                }

                .line-right {
                    width: 50%;
                    height: 2rpx;
                    background: linear-gradient(to right, #fff, #5079ed);
                }
            }

            .progress {
                width: 90%;
                margin: 18rpx 5%;
                height: 25rpx;
                border-radius: 20rpx;
                background-color: #8ba1ee;
                position: relative;

                .bar {
                    position: absolute;
                    width: 90%;
                    height: 25rpx;
                    border-radius: 20rpx;
                    opacity: 1 !important;
                    background-color: #fff;
                    z-index: 9;
                }
            }
        }

        .relaNameTip {
            font-size: 32rpx;
            color: #000;
            font-weight: 600;
            margin: 36rpx 0;

            span {
                color: #999;
                margin-left: 16rpx;
                font-size: 24rpx;
            }
        }

        .types {
            min-height: 200rpx;
            width: 100%;
            border-radius: 20rpx;
            border: 3rpx solid #e7e7e7;
            display: flex;
            align-items: center;
            justify-content: center;

            .con {
                width: 90%;
                margin: 20rpx 0;

                .flexs {
                    display: flex;
                    justify-content: space-around;
                    align-items: center;
                    margin-top: 25rpx;
                }

                .img {
                    width: 76rpx;

                }
            }
        }

        .others {
            width: 75%;
            margin-top: 30rpx;
            margin-left: 1%;


            .otherCon {
                border-radius: 20rpx;
                width: 160rpx;
                height: 170rpx;
                color: #333;
                text-align: center;

                .img {
                    width: 100rpx;
                    height: 100rpx;
                }
            }
        }
    }
</style>